﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListSelector.aspx.cs" Inherits="DummyWebProject.ListSelector" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <%--<script type="text/javascript">
        function caretPosition(ctrl, caretPos, selectFromLastPosition) {
            if (typeof (caretPos) != 'undefined')
                setCaretPosition(ctrl, caretPos, selectFromLastPosition);
            else
                return getCaretPosition(ctrl);
        }

        function getCaretPosition(ctrl) {
            var CaretPos = 0;
            // IE Support
            if (document.selection) {

                ctrl.focus();
                var Sel = document.selection.createRange();
                var SelLength = document.selection.createRange().text.length;
                Sel.moveStart('character', -ctrl.value.length);
                CaretPos = Sel.text.length - SelLength;
            }
            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0')
                CaretPos = ctrl.selectionStart;

            return (CaretPos);
        }
        function selectionLength(ctrl, length) {
            if (typeof (length) == 'undefined') {
                ctrl.focus();
                return document.selection.createRange().text.length;
            }
            else {
                var oSel = document.selection.createRange();
                oSel.moveEnd('character', length);
                oSel.select();
            }
        }

        function setCaretPosition(ctrl, iCaretPos, selectFromLastPosition) {

            // IE Support
            if (document.selection) {

                // Set focus on the element
                ctrl.focus();

                // Create empty selection range
                var caret = caretPosition(ctrl);
                var oSel = document.selection.createRange();

                // Move selection start and end to 0 position
                oSel.moveEnd('character', -ctrl.value.length);

                // Move selection start and end to desired position
                if (selectFromLastPosition) {
                    if (caret > iCaretPos) {
                        oSel.moveStart('character', iCaretPos);
                        oSel.moveEnd('character', caret - iCaretPos);
                    }
                    else {
                        oSel.moveStart('character', caret);
                        oSel.moveEnd('character', iCaretPos - caret);
                    }
                }
                else {
                    oSel.moveStart('character', iCaretPos);
                }


                oSel.select();
            }

            // Firefox support
            else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
                ctrl.selectionStart = iCaretPos;
                ctrl.selectionEnd = iCaretPos;
                ctrl.focus();
            }
        }

    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/jquery-1.3.2.min.js" />
            <asp:ScriptReference Path="~/jquery-ui-1.7.1.custom.min.js" />
            <asp:ScriptReference Assembly="JQuery" Name="JQuery.JQuery.ACT.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <div id="trueInput">
            <input type="hidden" name="trueInput_value" />
            <input type="text" style="position: absolute; z-index: 0;" id="dummyInput" />
                        <a href="#" onclick="return false;" style="position:absolute; right:0px" class="validate">Check</a>
        </div>

        <script type="text/javascript">
            $(function() {
                $('#trueInput').listSelector({ validationFunction: function(value) {
                    if (value == "Boris")
                        return "EVALUANT\\b.binder";
                    if (value == "Nicolas")
                        return "EVALUANT\\n.penin";
                }
                })
            });
        </script>

    </div>

    <script type="text/javascript">
//        $('#trueInput ul').css({ 'position': 'absolute', 'overflow': 'hidden', 'z-index': '10', 'list-style': 'none', 'margin': 0, 'padding': 3, 'font-family': $('#dummyInput').css('font-family'), 'font-size': $('#dummyInput').css('font-size'), 'font-weight': $('#dummyInput').css('font-weight'), 'width': $('#dummyInput').css('width') });
//        $('#trueInput li').css({ 'float': 'left', 'visible': 'hidden' }).click(function() {
//            $('#dummyInput').trigger('click', arguments);
//            var caret = getCaretPosition($('#dummyInput')[0]);
//            var currentLi = this;
//            var totalLength = 0;
//            $('#trueInput li').each(function() {
//                var value = $.trim($(this).text());
//                if (currentLi == this) {
//                    if (this.key) {
//                        caretPosition($('#dummyInput')[0], totalLength);
//                        selectionLength($('#dummyInput')[0], value.length);
//                    }
//                    else
//                        caretPosition($('#dummyInput')[0], caret);
//                }
//                totalLength += value.length;
//            });
//        });
//        $('#dummyInput').live('keydown', function(event) {
//            if (!event)
//                event = window.event;
//            if (event) {
//                if (event.keyCode)
//                    keyCode = event.keyCode;
//                if (event.which)
//                    keyCode = event.which;
//            }
//            var propagateEvent = true;
//            var caretPos = caretPosition(this);
//            var totalLength = 0;
//            //Left
//            if (keyCode == 37) {
//                $('#trueInput li').each(function() {
//                    var value = $.trim($(this).text());
//                    if (totalLength < caretPos && value.length + totalLength > caretPos - 1) {
//                        var inputValue = $('#trueInput input').val();
//                        if (this.key) {
//                            caretPosition($('#trueInput input')[0], caretPos - value.length, !event.ctrlKey);
//                            propagateEvent = value == 1;
//                        }
//                    }
//                    totalLength += value.length;
//                });

//                return propagateEvent;
//            }
//            //Right
//            if (keyCode == 39) {
//                $('#trueInput li').each(function() {
//                    var value = $.trim($(this).text());
//                    if (totalLength < caretPos + 1 && value.length + totalLength > caretPos) {
//                        var inputValue = $('#trueInput input').val();
//                        if (this.key) {
//                            if (!(propagateEvent = selectionLength($('#trueInput input')[0]) > 0))
//                                caretPosition($('#trueInput input')[0], caretPos + value.length, !event.ctrlKey);
//                        }
//                    }
//                    totalLength += value.length;
//                });

//                return propagateEvent;
//            }
//            //BackSpace
//            if (keyCode == 8) {
//                $('#trueInput li').each(function() {
//                    var value = $.trim($(this).text());
//                    var selLength = selectionLength($('#trueInput input')[0]);
//                    if (totalLength < caretPos + selLength && value.length + totalLength > caretPos + selLength - 1) {
//                        var inputValue = $('#trueInput input').val();
//                        if (this.key || value == 1) {
//                            if (selLength == 0) {
//                                $('#trueInput input').val(inputValue.substring(0, totalLength) + inputValue.substring(totalLength + value.length));
//                            }
//                            else {
//                                $('#trueInput input').val(inputValue.substring(0, caretPos) + inputValue.substring(caretPos + selLength));
//                                caretPosition($('#trueInput input')[0], caretPos);
//                            }
//                            $(this).remove();
//                            propagateEvent = value == 1;
//                        }
//                        else {
//                            $(this).text(value.substring(0, caretPos - totalLength - 1) + value.substring(caretPos - totalLength));
//                        }
//                    }
//                    totalLength += value.length;
//                });
//                this.focus();
//                return propagateEvent;
//            }
//        });

    </script>

    </form>
</body>
</html>
